<template>
  <!-- <img src="/static/images/star.png" alt="" style="height: 50px; width: 50px" /> -->
  <div id="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from 'cesium'
import { onMounted, ref } from 'vue'
import earthImg from '../assets/earth2.jpg'
import icon from '../assets/wind.png'
import star from '../assets/star.png'
// import breathe from '../assets/breathe.png'
// import breathe2 from '../assets/breathe2.svga'

// /static/images/b1.jpg
import { GlobeRotate } from '../utils/globeRotate.js'
// import apngjs from '../utils/apngjs.js'
// 设置cesium token
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhMzNkNTE5Zi1mMjY4LTRiN2QtOTRlZC1lOTUyM2NhNDYzNWYiLCJpZCI6NTU0OTYsImlhdCI6MTYyNTAyNjMyOX0.a2PEM4hQGpeuMfeB9-rPp6_Gkm6O-02Dm4apNbv_Dlk'
const cesiumContainer = ref(null)
let viewer = null
onMounted(() => {
  viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false, //是否创建动画小器件，左下角仪表
    baseLayerPicker: false, //是否显示图层选择器
    fullscreenButton: false, //是否显示全屏按钮
    geocoder: false, //是否显示geocoder小器件，右上角查询按钮
    homeButton: false, //是否显示Home按钮
    infoBox: false, //是否显示信息框
    sceneModePicker: false, //是否显示3D/2D选择器
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: false, //是否显示时间轴
    sceneMode: Cesium.SceneMode.SCENE3D, //设定3维地图的默认场景模式:Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D、Cesium.SceneMode.MORPHING
    navigationHelpButton: false, //是否显示右上角的帮助按钮
    scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
    navigationInstructionsInitiallyVisible: false,
    showRenderLoopErrors: false, //是否显示渲染错误
    orderIndependentTranslucency: true,
    imageryProvider: new Cesium.SingleTileImageryProvider({
      url: earthImg
    })
  })

  // Globe 对象
  let globe = viewer.scene.globe
  // 一定要为 true，否则 undergroundColor 设置无效
  globe.translucency.enabled = true
  globe.baseColor = Cesium.Color.BLACK
  globe.undergroundColor = Cesium.Color.TRANSPARENT
  globe.atmosphereLightIntensity = 0
  viewer.scene.skyAtmosphere.show = false
  globe.translucency.frontFaceAlpha = 0.9 // 设置地球的透明度为90%

  // 设置相机位置
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(98.0, 5.0, 20000000.0)
  })

  // 点

  // 创建粒子系统
  // let particleSystem = viewer.scene.primitives.add(
  //   new Cesium.ParticleSystem({
  //     image: star, // 粒子的图像
  //     startColor: Cesium.Color.YELLOW, // 粒子的初始颜色
  //     startScale: 2.0, // 粒子的初始大小
  //     maximumParticleLife: 10.0, // 粒子的最大生命周期
  //     maximumSpeed: 0.0005, // 粒子的最大速度
  //     imageSize: new Cesium.Cartesian2(20, 20), // 粒子的图像大小
  //     emissionRate: 1.0, // 每秒发射的粒子数量
  //     // lifetime: 16.0, // 粒子系统的生命周期
  //     emitter: new Cesium.SphereEmitter(10000000.0) // 粒子发射器，这里我们使用一个球形发射器，半径为5000000.0
  //     // forces: [applyGravity] // 粒子受到的力，这里我们添加了重力
  //   })
  // )

  let particleSystem = viewer.scene.primitives.add(
    new Cesium.ParticleSystem({
      image: star, // 粒子的图像
      startColor: Cesium.Color.YELLOW, // 粒子的初始颜色
      startScale: 2.6, // 粒子的初始大小
      maximumSpeed: 0.0001, // 粒子的最大速度，降低这个值可以降低粒子的速度
      imageSize: new Cesium.Cartesian2(20, 20), // 粒子的图像大小
      emissionRate: 0.5, // 每秒发射的粒子数量
      emitter: new Cesium.SphereEmitter(20000000.0), // 粒子发射器
      forces: [applyGravity] // 粒子受到的力
    })
  )

  // // 重力函数
  function applyGravity(p, dt) {
    // 我们将重力定向到地球的中心
    var position = p.position
    var gravity = Cesium.Cartesian3.normalize(position, new Cesium.Cartesian3())
    Cesium.Cartesian3.multiplyByScalar(gravity, -0.001 * dt, gravity) // 减小重力值
    p.velocity = Cesium.Cartesian3.add(p.velocity, gravity, p.velocity)
  }

  // let points = viewer.scene.primitives.add(
  //   new Cesium.PointPrimitiveCollection()
  // )

  // // 创建点粒子
  // function createPoint() {
  //   let point = points.add({
  //     color: Cesium.Color.YELLOW,
  //     pixelSize: 5,
  //     position: new Cesium.Cartesian3(
  //       Math.random() * 2 - 1,
  //       Math.random() * 2 - 1,
  //       Math.random() * 2 - 1
  //     )
  //   })

  //   // 设置点粒子的运动
  //   point.velocity = new Cesium.Cartesian3(
  //     Math.random() * 0.02 - 0.01,
  //     Math.random() * 0.02 - 0.01,
  //     Math.random() * 0.02 - 0.01
  //   )

  //   return point
  // }

  // // 创建多个点粒子
  // for (let i = 0; i < 1000; i++) {
  //   createPoint()
  // }

  // // 更新点粒子的位置
  // viewer.scene.preRender.addEventListener(function () {
  //   for (let i = 0; i < points.length; i++) {
  //     let point = points.get(i)
  //     point.position = Cesium.Cartesian3.add(
  //       point.position,
  //       point.velocity,
  //       new Cesium.Cartesian3()
  //     )
  //   }
  // })

  // let yellowPoints = viewer.scene.primitives.add(
  //   new Cesium.PointPrimitiveCollection()
  // )

  // function addPoint() {
  //   let center = viewer.camera.pickEllipsoid(
  //     new Cesium.Cartesian2(
  //       viewer.canvas.clientWidth / 2,
  //       viewer.canvas.clientHeight / 2
  //     )
  //   )
  //   let direction = new Cesium.Cartesian3(
  //     Math.random() - 0.5,
  //     Math.random() - 0.5,
  //     Math.random() - 0.5
  //   )
  //   direction = Cesium.Cartesian3.normalize(direction, new Cesium.Cartesian3())
  //   let point = yellowPoints.add({
  //     position: Cesium.Cartesian3.clone(center),
  //     color: Cesium.Color.YELLOW,
  //     pixelSize: 5, // 点的初始大小，可以根据需要调整
  //     direction: direction,
  //     lifetime: Date.now() + 10000 // 点的生命周期为10秒
  //   })
  // }

  // setInterval(addPoint, 1000 / 3) // 每秒生成3个点

  // function animatePoints() {
  //   var points = yellowPoints._pointPrimitives
  //   var length = points.length
  //   for (var i = 0; i < length; ++i) {
  //     var point = points[i]
  //     point.position = Cesium.Cartesian3.add(
  //       point.position,
  //       Cesium.Cartesian3.multiplyByScalar(
  //         point.direction,
  //         1000,
  //         new Cesium.Cartesian3()
  //       ),
  //       point.position
  //     )
  //     point.pixelSize += 0.1 // 点的大小逐渐变大
  //     if (Date.now() > point.lifetime) {
  //       yellowPoints.remove(point) // 当点的生命周期结束时，从集合中移除它
  //     }
  //   }
  // }

  // viewer.scene.preRender.addEventListener(animatePoints)

  /*
  //  生成64800个点，每个经度、纬度值各生成一个点，高度为0（贴地表）
  //  每个点都添加到PointPrimitiveCollection对象中
   var pointCollection = viewer.scene.primitives.add(
    new Cesium.PointPrimitiveCollection()
  )
  for (var longitude = -180; longitude < 180; longitude++) {
    var color = Cesium.Color.PINK
    if (longitude % 2 === 0) {
      color = Cesium.Color.CYAN
    }
    for (var latitude = -90; latitude < 90; latitude++) {
      pointCollection.add({
        position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
        color: color
      })
    }
  }

  //  模拟每个点固定向外偏移(1km,1km,1km)(跟时间无关，每帧调用此函数)
  function animatePoints() {
    var positionScratch = new Cesium.Cartesian3()
    var points = pointCollection._pointPrimitives
    var length = points.length
    for (var i = 0; i < length; ++i) {
      var point = points[i]
      Cesium.Cartesian3.clone(point.position, positionScratch)
      Cesium.Cartesian3.add(
        positionScratch,
        new Cesium.Cartesian3(1000, 1000, 1000),
        positionScratch
      )
      point.position = positionScratch
    }
  }
  //  scene中的render 方法，每一帧都被会调用，用于场景的重绘
  //  此处的preRender在render方法之前执行，也是每一帧被调用
  //  由于每一帧调用animatePoints方法时，方法内部都将每个点
  //    的位移向外移动1km，因此所有点就都运动起来了
  viewer.scene.preRender.addEventListener(animatePoints)
 */

  // 地球球体自转
  let globeRotate = new GlobeRotate(viewer)
  globeRotate.start()
})
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>
